<template>
	<div class="foodDetail">
		<div>
			<van-nav-bar left-arrow @click-left="back" title="商品详情"></van-nav-bar>
		</div>

			<van-image
					width="100%"
					height="14rem"
					fit="cover"
					:src="`http://localhost:8080/res/${food.food_img}`"
			/>
		<div class="foodDetail-good">
			<div class="foodName">{{food.food_name}}</div>
			<div class="foodPrice"><span style="font-size: 13px;vertical-align: bottom">￥</span>
				{{food.food_price}}
				<div class="addCart" v-show="numberOfGoods==0"
				><van-button icon="plus" size="mini" type="warning" @click="joinFood">加入购物车</van-button></div>
				<div class="addCart" v-show="numberOfGoods>0"
				><van-stepper v-model="numberOfGoods" theme="round" button-size="22" integer min="0" step="0"
					@plus="joinFood" @overlimit="$toast('多规模菜品请在购物篮中删减')" disable-input
					@minus="reduceFood"	:disable-minus="cartDetails.length>1"/></div>
			</div>
			<div class="foodDesc" :class="{foldText:fold}" @click="fold=false">{{food.food_depiction}}</div>
		</div>
		<div class="foodDetail-comment">
			<div class="commentHad" @click="displayComment">商品评价<span>{{evaluations.length}}条评价</span>
				<van-icon :name="commentTag" style="transform: translateY(7px);font-size: 10px"/>
			</div>
			<div class="commentContainer" v-show="commentTag=='arrow-down'">
				<van-empty v-if="evaluations.length==0" image="search" description="暂无评价" />
				<div v-else>
					<div class="commentBody" v-for="(cur,index) in evaluations" :key="index">
						<div class="avatar">
							<van-image round :src="`http://localhost:8080/res/${cur.customeruser.head_img}`"
									   height="3rem" width="3rem"/>
							<div class="userNickName">{{cur.customeruser.user_nickname}}</div>
						</div>
						<div class="commentContent">
							<van-rate v-model="cur.evaluation_lv" readonly />
							<div class="time">{{cur.evaluation_time}}</div>
							<div class="textContent">{{cur.evaluation_content}}</div>
							<div class="picContent" v-if="cur.evaluation_img">
								<van-image width="3rem" :src="`http://localhost:8080/res/${cur.evaluation_img}`"/>
							</div>
						</div>
						<van-divider :style="{borderColor: '#7b7a7a', padding: '0 16px' }"/>
					</div>
				</div>
			</div>
		</div>
		<div class="smallCart" ref="cart" @touchstart="move">
			<van-icon name="cart-o" size="2em" v-show="numberOfGoods==0"></van-icon>
			<van-icon name="cart-o" @click="showCart=true" size="2em" :badge="numberOfGoods"
					  v-show="numberOfGoods" />
		</div>
		<van-action-sheet v-model="show">
			<div class="specifications">
				<van-icon name="cross" @click="show=false"/>
				<div class="foodDetail">
					<van-image
							width="7rem"
							height="7rem"
							:src="`http://localhost:8080/res/${food.food_img}`"
					/>
					<div class="food-name">{{food.food_name}}</div>
					<div class="food-price">￥{{food.food_price}}</div>
				</div>
				<div class="selections">
					<div>口味</div>
					<ul>
						<li v-for="(sel,index) in speci_1" :key="index"
							@click="one=one==index?-1:index" :class="{checked:one==index}">{{sel.text}}</li>
					</ul>
					<div>配料</div>
					<ul>
						<li v-for="(sel,index) in speci_2" :key="index"
							@click="two=two==index?-1:index" :class="{checked:two==index}">{{sel.text}}</li>
					</ul>
				</div>
				<div style="position: relative;top: 4rem;">
					<van-button type="warning" round block @click="confirmChoose"
					:disabled="!(one>-1&&two>-1)">确定</van-button>
				</div>
			</div>
		</van-action-sheet>
		<van-action-sheet
				v-model="showCart"
				cancel-text="去结算"
				:title="`${'共计'+total+'元'}`"
				@cancel="onCancel"
		>
			<van-cell-group>
				<van-cell v-for="(cur,index) in cartDetails" :title="cur.detail_attach" :key="cur.detail_attach">
					<template #default>
						<van-stepper v-model="cur.food_amount" min="0" theme="round" :key="cur.detail_attach"
						@change="value=>changeNum(value,index)"/>
					</template>
				</van-cell>
			</van-cell-group>
		</van-action-sheet>
	</div>
</template>

<script>
	export default{
		name:"FoodDetail",
		data() {
			return {
				moveFlag:'',
				showCart:false,
				speci_1:[{text:"不辣",value:0},
					{text:"微辣",value:1},
					{text:"特辣",value:2},],
				speci_2:[{text:"加葱",value:0},
					{text:"加姜",value:1},
					{text:"加蒜",value:2},],
				one:0,
				two:1,
				fold:true,
				commentTag:'arrow-up',
				name:'alpha',
				show: false,
				active: 0,
				food:{},
				evaluations:[],
				cartDetails:[],
			};
		},
		created(){
			let foodID=this.$route.params.food_id;
			console.log(foodID);
			this.axios.post(this.GLOBAL.foodDetail,{foodid:foodID}).then(res=>{
				this.food=res.data;
				this.cartDetails=this.$store.getters.getDetails(this.food.food_id);
			});
			this.axios.get(this.GLOBAL.foodEvaluation,{params:{food_id:foodID}}).then(res=>{
					this.evaluations=res.data.EvaluationList;
			});
		},
		computed:{
			total(){
				let total=0;
				this.cartDetails.forEach(cur=>{
					total=this.GLOBAL.add(total,cur.total_cost);
				});
				return total;
			},
			numberOfGoods:{
				get(){
					let total=0;
					this.cartDetails.forEach(cur=>{
						total=this.GLOBAL.add(total,cur.food_amount);
					});
					return total;
				},
				set(value){

				}
			},
		},
		methods:{
			move(event){
				let eventTouch=event.touches[0];
				let dom=this.$refs.cart;
				let offsetx =dom.offsetLeft-eventTouch.clientX;
				let offsety=dom.offsetTop-eventTouch.clientY;
				this.moveFlag=true;
				dom.addEventListener('touchmove',ev => {
					//阻止页面滑动
					document.addEventListener("touchmove",function(){
					event.preventDefault();
					},false);
					let evTouch=ev.touches[0];
					if(this.moveFlag){
						dom.style.left=evTouch.clientX+offsetx+'px';
						dom.style.top=evTouch.clientY+offsety+'px';
					}
				});
				dom.addEventListener('touchend',ev => {
					this.moveFlag=false;
				})
			},
			back(){
				this.$router.back();
			},
			displayComment(){
				this.commentTag=this.commentTag=='arrow-down'?'arrow-up':'arrow-down';
			},
			joinFood(){
				this.show=true;
				if(!this.$store.getters.getisLogin){
					this.$notify({type:'warning',message:'请先登录'});
					this.$router.push({name:'Login'});
				}
			},
			reduceFood(){
				let detail=this.cartDetails.pop();
				if(detail.food_amount--){
					detail.total_cost=this.GLOBAL.sub(detail.total_cost,this.food.food_price);
					this.cartDetails.push(detail);
					this.axios.post(this.GLOBAL.foodChangeCart,detail).then(res=>{
						console.log(res.data);
					});
				}else{
					this.axios.post(this.GLOBAL.foodexAwayCart,detail).then(res=>{
						console.log(res.data);
					});
				}
				this.$store.commit('addDetails',{foodID:this.food.food_id,details:this.cartDetails});
			},
			confirmChoose(){
				let detail=this.cartDetails.find(cur=>{
					return cur.detail_attach==`${this.speci_1[this.one].text+this.speci_2[this.two].text}`;
				});
				if(detail){
					detail.food_amount++;
					detail.total_cost=this.GLOBAL.add(detail.total_cost,this.food.food_price);
					this.axios.post(this.GLOBAL.foodChangeCart,detail).then(res=>{
						console.log(res.data);
					});
				}else{
					detail={
						food_id:this.food.food_id,
						food_amount:1,
						total_cost:this.food.food_price,
						detail_attach:`${this.speci_1[this.one].text+this.speci_2[this.two].text}`,
					};
					this.cartDetails.push(detail);
					this.axios.post(this.GLOBAL.foodChangeCart,detail).then(res=>{
						console.log(res.data);
					});
				}
				this.$store.commit('addDetails',{foodID:this.food.food_id,details:this.cartDetails});
				this.show=false;
			},
			changeNum(value,index){
				let detail=this.cartDetails[index];
				if(value){
					detail.total_cost=this.GLOBAL.mul(value,this.food.food_price);
					this.$set(this.cartDetails,index,detail);
					this.axios.post(this.GLOBAL.foodChangeCart,detail).then(res=>{
						console.log(res.data);
					});
				}else{
					this.cartDetails.splice(index,1);
					this.axios.post(this.GLOBAL.foodexAwayCart,detail).then(res=>{
						console.log(res.data);
					});
					if(!this.cartDetails.length){
						this.showCart=false;
					}
				}
				this.$store.commit('addDetails',{foodID:this.food.food_id,details:this.cartDetails});
			},
			// addNum(index){
			// 	let detail=this.cartDetails[index];
			// 	detail.food_amount++;
			// 	detail.total_cost=this.GLOBAL.add(detail.total_cost,this.food.food_price);
			// 	this.$set(this.cartDetails,index,detail);
			// 	this.axios.post(this.GLOBAL.foodToCart,{
			// 		food_id:this.food.food_id,
			// 		food_amount:1,
			// 		total_cost:this.food.food_price,
			// 		detail_attach:`${this.speci_1[this.one].text+this.speci_2[this.two].text}`,
			// 	}).then(res=>{
			// 		console.log(res.data);
			// 	});
			// },
			// delNum(index){
			// 	let detail=this.cartDetails[index];
			// 	if(!--detail.food_amount){
			// 		this.cartDetails.splice(index,1);
			// 		this.axios.post(this.GLOBAL.foodAwayCart,detail).then(res=>{
			// 			console.log(res.data);
			// 		});
			// 		if(!this.cartDetails.length){
			// 			this.showCart=false;
			// 		}
			// 	}else{
			// 		detail.total_cost=this.GLOBAL.sub(detail.total_cost,this.food.food_price);
			// 		this.$set(this.cartDetails,index,detail);
			// 		this.axios.post(this.GLOBAL.foodFromCart,{
			// 			food_id:this.food.food_id,
			// 			food_amount:1,
			// 			total_cost:this.food.food_price,
			// 			detail_attach:`${this.speci_1[this.one].text+this.speci_2[this.two].text}`,
			// 		}).then(res=>{
			// 			console.log(res.data);
			// 		});
			// 	}
			// },
			onCancel(){
				this.$router.push({
					name:'ShoppingCart'
				});
			},
		},

	}
</script>

<style lang="less">
	@import "../../main.less";
	.foldText{
		overflow : hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;

	}
	.foodDetail{
		touch-action: none;
		.foodDetail-good{
			margin-left: 20px;
			position: relative;
			.foodName{
				font-weight: 500;
				font-size: 30px;
				letter-spacing: 5px;
				margin-bottom: 10px;
			}
			.foodPrice{
				position: relative;
				color: red;
				margin: 15px 0;
				.addCart{
					position: absolute;
					right: 0px;
					top:50%;
					transform: translate(-50%,-50%);
					.van-button{
						min-width: 78px;
					}
				}
				.van-stepper__minus{
					background-color: white;
					border: 1px solid #FF976A;
					color: #FF976A;
				}
				.van-stepper__plus{
					background-color: #FF976A;
				}
			}
			.foodDesc{
				color: #7b7a7a;
				margin-bottom: 10px;
			}
		}
		.foodDetail-comment{
			width: 90%;
			margin: 0 auto;
			.van-empty{
				padding: 0;
			}
			.commentHad{
				font-size: 20px;
				margin-bottom: 10px;
				span{
					margin-left: 15px;
					.tips;
					vertical-align: text-bottom;
				}
			}
			.commentBody{
				display: flex;
				flex-wrap: wrap;
				.avatar{
					flex: 1;
					.userNickName{
						font-size: 12px;
					}
				}
				.commentContent{
					padding: 10px;
					flex: 4;
					.time{
						float: right;
						.tips;
					}
				}
				.van-divider{
					width: 100%;
				}
				&:last-child{
					.van-divider{
						visibility: hidden;
					}
				}
			}
		}
		.specifications{
			height: 400px;
			padding: 20px;
			.van-icon:first-of-type{
				float: right;
				font-size: 25px;
				color: gray;
			}
			.foodDetail{
				.food-name,.food-price{
					float: left;
					margin-left: 25px;
					width: 50%;
				}
				.van-image{
					float: left;
					margin-left: 0;
				}
				.food-name{
					font-size: 1.5rem;
					line-height: 1.5rem;
					margin-bottom: 4rem;
				}
				.food-price{
					font-size: 1rem;
					line-height: 1.5rem;
					color: red;
				}
				&:after{
					content: '';
					display: block;
					clear: both;
				}
			}
			.selections{
				margin-top: 10px;
				div{
					margin: 5px 0;
				}
				ul{
					display: flex;
					justify-content: space-evenly;
					li{
						height: 30px;
						width: 6rem;
						text-align: center;
						line-height: 30px;
						background-color: #F7F7F7;
					}
				}
			}
		}
		.smallCart{
			width: 2.5em;
			height: 2.5em;
			border-radius: 100%;
			background-color: white;
			position: fixed;
			left: 80%;
			top:70%;
		}
		.van-overlay{
			background-color: rgba(0,0,0,0.5);
		}
		.van-dialog__content{
			padding: 10px;
			text-align: center;
		}
	}
</style>
